<template>
  <div>
    <p>父组件</p>
    <my-table :data="persons">
      <!-- 新的作用域插槽写法（掌握） -->
      <!-- <template #default="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template> -->
      <template #abc="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <br />
    <br />
    <hr />
    <br />
    <br />
    <br />
    <my-table :data="persons2">
      <!-- 旧的写法（看懂） -->
      <!-- <template  slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'red' : 'purple' }">{{
          scope.row.tag
        }}</span>
      </template> -->
      <template slot="abc" slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'red' : 'purple' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
  </div>
</template>

<script>
import MyTable from './my-table'
export default {
  data () {
    return {
      persons: [
        { id: 1001, name: '杨康', address: '中都', tag: '家' },
        { id: 1002, name: '成昆', address: '光明顶', tag: '公司' },
        { id: 1003, name: '岳不群', address: '华山', tag: '家' },
        { id: 1004, name: '东方不败', address: '船上', tag: '公司' }
      ],
      persons2: [
        { id: 1001, name: '杨康2', address: '中都2', tag: '家' },
        { id: 1002, name: '成昆2', address: '光明顶2', tag: '公司' },
        { id: 1003, name: '岳不群2', address: '华山2', tag: '家' },
        { id: 1004, name: '东方不败2', address: '船上2', tag: '公司' }
      ]
    }
  },
  components: {
    MyTable
  }
}
</script>
